<template>
	<block class="warp" style="background-color: #FFFFFF;">
		<scroll-view class="box_content flex">
			<view class='searchGood select'>
				<!-- <view class="search flex">
					<search placeholder="输入订单号" v-model="keyword" cancelButton="none" @confirm="search">
					</search>
				</view> -->
				<view class='search flex' >
					<text class='iconfont' style="color: #999999;font-size:55rpx;margin-left: -70rpx;">&#xe66a;</text>
					<input type='text' :focus="false" v-model='keyword' placeholder='输入订单号'
						placeholder-class='placeholder' />
				</view>
				<view class="btn" @click="query()">
					查询
				</view>
			</view>
			<view class="tab">
				<tab :tabs="tabTitle" ref="tabs" style="background-color: #2979ff;" @change="childFn" v-model="activeTab" field="name"></tab>
			</view>
			<scroll-view class="shop_item" scroll-y  @scrolltolower="scrolltolower">
				<view class="item" v-for="(item,index) in list" :key="index" @click="jumpto(item)">
					<!-- <image :src="item.worker.avatar" style="width: 150rpx;height: 150rpx;"></image> -->
					<view class="orderNo">订单号:{{item.order_id}}</view>
					<view class="name">师傅:{{item.worker.nickname || '无'}}</view>
					<view class="time">日期:{{item.add_time_date}}</view>
					<view class="close" @click.stop="close(item.id)" v-if="activeTab == 0">
						取消订单
					</view>
					<view class="reason" v-if="item.status == 0 && item.refusal_content">未接单原因:{{item.refusal_content}}</view>
					<view class="status" v-if="item.status == '6'">已完成</view>
					<view class="opration-qpj" v-if="item.status == '6' && item.is_comment == 0" @click="topj(item)">去评价</view>
					<view class="opration-ypj" v-if="item.status == '6' && item.is_comment != 0">已评价</view>
					<view class="status"  v-if="item.status == '7' ">已取消</view>
					<view class="opration-jxz" v-if="item.status == '4'">进行中</view>
					<view class="opration-dsl" v-if="item.status == '0'">已报修</view>
					<view class="opration-dsl" v-if="item.status == '1'">待受理</view>
					<view class="opration-wsl" v-if="item.status == '0' && item.refusal_content">未受理</view>
					<view class="opration-zpz" v-if="item.status == '2'">待派工</view>
					<view class="opration-jxz" v-if="item.status == '3'">进行中</view>
					<view class="opration-jxz" v-if="item.status == '5'">待确认</view>
				</view>
				<view class="end" v-if="count != list.length">
					共{{count}}条订单
					<!-- &nbsp;&nbsp;已加载{{list.length}}条 -->
				</view>
				<view class="end" v-if="count == list.length">
					没有更多了~~
				</view>
			</scroll-view>
		</scroll-view>
	</block>
</template>

<script>
	import tab from '../../tab.vue'
	import search from '../../../components/uni-ui/lib/uni-search-bar/uni-search-bar.vue'
	import {
		orderDetail,cancelWorderUser
	} from '../../../api/api.js'
	export default {
		components: {
			tab,search
		},
		data() {
			return {
				tabTitle: [{
						name: "待受理",
						id: 1
					},
					{
						name: "进行中",
						id: 2
					},
					{
						name: "已完成",
						id: 3
					},
					{
						name: "已取消",
						id: 4
					},
				],
				list: [],
				activeTab:0,
				statusBarHeight: "",
				keyword: "",
				type: 1,
				page: 1,
				limit: 10,
				count: 0,
			}
		},
		onLoad(opt) {
			if(!opt) return;
			this.$refs.tabs.current = opt.tab
		},
		created() {
			
			this.statusBarHeight = uni.getStorageSync('statusBarHeight')
			this.query()
		},
		methods: {
			//去评价
			topj(e){
				uni.navigateTo({
					url:`/pages/evaluation/index?id=${e.id}`
				})
			},
			// 取消订单
			close(e){
				let that = this
				uni.showModal({
					title:'提示',
					content:'确定取消订单吗？',
					showCancel:true,
					cancelText:'我点错了',
					success:(res)=>{
						if(res.confirm){
							cancelWorderUser({id:e}).then(res=>{
								if(res.status == 200){
									uni.showToast({
										title:res.msg,
										icon:"none"
									})
									// setTimeout(()=>{
										that.query()
									// },300)
								}else{
									uni.showToast({
										title:res.msg,
										icon:"none"
									})
								}
							})
						}else{
							
						}
					}
				})
			},
			//底部刷新
			scrolltolower(){
				if(this.count == this.list.length) return
				console.log('触发刷新')
				this.page++
				let data = {
					order_id: this.keyword,
					type: this.type,
					page: this.page,
					limit: this.limit
				}
				orderDetail(data).then(res => {
					console.log(res)
					this.list =this.list.concat(res.data.list) 
					this.count = res.data.count
				})
			},
			// 跳转详情
			jumpto(e) {
				console.log('订单信息', e.id)
				uni.navigateTo({
					url: `/pages/orderDetail/index?id=${e.id}`
				})
			},
			query() {
				this.list = []
				this.page =1
				let data = {
					order_id: this.keyword,
					type: this.type,
					page: this.page,
					limit: this.limit
				}
				orderDetail(data).then(res => {
					console.log(res)
					this.list = res.data.list
					this.count = res.data.count
				})
			},
			childFn(e) {
				console.log(e,this.$refs.tabs.current)
				this.activeTab = e
				this.type = e + 1
				this.query()
			},
		}
	}
</script>

<style scoped lang="less">
	.home_top {
		/* padding-left: -25px; */
		background-image: url('http://xiaowen.cool:86/yjky/yjkybg.png');
		background-size: cover;
		width: 750upx;
		height: 370upx;
		padding: 20upx;
		box-sizing: border-box;
		/* background-color: #4cd964; */
		flex-direction: row;
		align-items: center;
	}

	.box_content {
		display: flex;
		position: absolute;
		top: 0rpx;
		width: 100%;
		background-color: #FFFFFF;
		bottom: 0;
	}

	.select {
		position: fixed;
		width: 100%;
		line-height: 150rpx;
		height: 150rpx;

		background-color: #FFFFFF !important;
		z-index: 99;
		top: 10rpx;
	}

	.searchGood {
		margin-top: 30rpx;
		display: flex;
		justify-content: flex-start;
		padding: 0 30rpx;
		width: 100%;
		height: 60rpx;
	}

	.searchGood .search {
		background-color: #F8F8F8;
		border-radius: 30rpx;
		padding-left: 0rpx;
		width: 65%;
	}

	.searchGood .search .input {
		width: 100%;
		border-radius: 33rpx;
		padding: 0 35rpx;
		box-sizing: border-box;
		height: 66rpx;
	}

	.searchGood .search .input input {
		font-size: 28rpx;
	}

	.searchGood .search .input .placeholder {
		color: #999999 !important;
	}

	.searchGood .search .input .iconfont {
		color: #999999;
		font-size: 35rpx;
	}

	.searchGood .search .bnt {
		width: 120rpx;
		text-align: right;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 30rpx;
		color: #999999;
	}

	.searchGood .title {
		font-size: 28rpx;
		color: #999999;
		margin: 50rpx 30rpx 25rpx 30rpx;
	}

	.searchGood .list {
		padding-left: 10rpx;
	}

	.searchGood .list .item {
		font-size: 26rpx;
		color: #454545;
		padding: 0 21rpx;
		height: 60rpx;
		border-radius: 3rpx;
		line-height: 60rpx;
		border: 1rpx solid #aaa;
		margin: 0 0 20rpx 20rpx;
	}

	.searchGood .line {
		border-bottom: 1rpx solid #eee;
		margin: 20rpx 30rpx 0 30rpx;
	}

	.btn {
		background-color: #029E8E;
		padding: 10rpx;
		display: block;
		color: #FFFFFF;
		border-radius: 10rpx;
		width: 100rpx;
		margin-left: 50rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.tab {
		display: block;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		z-index: 99;
		position: fixed;
		top: 110rpx;
	}


	.shop_item {
		display: block;
		padding: 30rpx;
		width: 100%;
		position: fixed;
		top: 170rpx;
		text-align: center;
		height: calc(75%);

		.end {
			margin-top: 50rpx;
			color: #333333;
			display: block;
			text-align: center;
			line-height: 60rpx;
			height: 60rpx;
		}

		.item {
			margin-left: 10rpx;
			// transform: translateX(-50%);
			width: 90%;
			margin-top: 25rpx;
			box-shadow: 0rpx 0rpx 10rpx 10rpx rgba(0, 0, 0, .05);
			height: 250rpx;
			position: relative;
			.name {
				position: absolute;
				top: 90rpx;
				color: #999999;
				left: 20rpx;
			}
			.close {
				position: absolute;
				right: 30rpx;
				padding: 5rpx 15rpx;
				border-radius: 10rpx;
				top: 20rpx;
				color: #999;
				// background-color: #D52F33;
				text-align: center;
			}

			.orderNo {
				position: absolute;
				top: 30rpx;
				color: #333333;
				font-size: 28rpx;
				left: 20rpx;
			}

			.time {
				position: absolute;
				top: 150rpx;
				// font-size: 20rpx;
				color: #999999;
				left: 20rpx;
			}
			.reason {
				position: absolute;
				top: 200rpx;
				font-size: 20rpx;
				color:#FD3833;
				left: 20rpx;
			}
			
			

			.status {
				position: absolute;
				top: 30rpx;
				color: #999999;
				right: 30rpx;
			}

			image {
				position: absolute;
				top: 30rpx;
				left: 10rpx;
				border-radius: 10rpx;
			}

			.opration-qpj,
			.opration-dsl,
			.opration-jxz,
			.opration-wsl,
			.opration-ypj,
			.opration-zpz {
				position: absolute;
				color: #FFFFFF;
				right: 30rpx;
				top: 140rpx;
				// background-color: #A0D675;
				padding: 5rpx 15rpx;
				border-radius: 10rpx;
			}

			.opration-ypj {
				background-color: #5490FE;
			}

			.opration-dsl {
				background-color: #FEC860;
			}

			.opration-jxz {
				background-color: #5490FE;
			}

			.opration-wsl {
				background-color: #FD3833;
			}

			.opration-zpz {
				background-color: #FD3833;
			}

			.opration-jxz {
				background-color: #5490FE;
			}

			.opration-dqr {
				background-color: #5490FE;
			}

			.opration-qpj {
				background-color: #A0D675;
			}


		}
	}
	/deep/ .uni-searchbar__box.data-v-dc8a797c {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		-webkit-box-pack: left;
		-webkit-justify-content: left;
		justify-content: left;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: left;
		-webkit-align-items: left;
		align-items: left;
		height: 36px;
		padding: 5px 8px 5px 0px;
		border-width: 0;
		border-style: solid;
		border-color: #FFFFFF !important;
	}
</style>
